<template>
  <div class="within">
    <div class="fun-btn clear">
      <el-button size="small" type="primary" @click="handleDrawer('新增密集架')" icon="el-icon-circle-plus-outline">新增密集架</el-button>
<!--      <el-button size="small" type="primary" @click="handleDrawer('编辑')">编辑</el-button>-->
      <el-button size="small" type="primary" @click="handleDel">删除</el-button>

      <!--<el-button size="small"
                 type="primary"
                 icon="el-icon-circle-plus-outline"
                 @click="handleDrawer('批量新增密集架')">批量新增密集架</el-button>-->

      <el-button size="small"
                 type="primary"
                 style="float: right"
                 icon="el-icon-back"
                 @click="$router.go(-1)">返回</el-button>

    </div>

    <ul class="house" v-loading="listLoading">
      <li v-for="(item, index) in listData" :key="index"
          :class="{'active': rowData.id === item.id}"
          @click="handleCheck(item)"
          @dblclick="handleToHose(item)">
          <within-list-item :item="item" @change="handleEdit"></within-list-item>
      </li>
    </ul>

    <el-drawer
      :title="setDrawer.title"
      :size="setDrawer.size"
      :direction="setDrawer.direction"
      :visible.sync="drawer"
    >
      <add-dense v-if="setDrawer.title === '新增密集架' || setDrawer.title === '编辑'"
                 :type="type"
                 :rowData="rowData"
                 @handleSuccess="handleSuccess">
      </add-dense>

      <batch-dense v-if="setDrawer.title === '批量新增密集架'"></batch-dense>
    </el-drawer>

  </div>
</template>

<script>
import AddDense from './components/addDense'
import BatchDense from './components/batchDense'
import {
  detDenseFrameList,
  editDenseFrameList,
  getDenseFrameList
} from '../../../../../api/house/houseArchives'
import WithinListItem from './components/withinListItem'
export default {
  name: 'WarehouseWithin',
  components: { WithinListItem, BatchDense, AddDense },
  data () {
    return {
      listLoading: false,
      drawer: false,
      type: '',
      setDrawer: {
        title: '',
        size: '',
        direction: 'ltr'
      },
      page: {
        pageSize: 20,
        pageNo: 1,
        total: 0
      },
      listData: [],
      rowData: {}
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      const param = {
        pageSize: this.page.pageSize,
        pageNo: this.page.pageNo,
        params: [{
          name: 'idRepo',
          op: 'eq',
          value: this.$route.query.id
        }]
      }

      getDenseFrameList(param).then(res => {
        this.listData = res.data.data
        this.listLoading = false
      }).catch(() => {
        this.listLoading = false
      })
    },
    handleCheck (item) {
      this.rowData = this.rowData.id === item.id ? {} : item
    },
    handleSuccess () {
      // 新增成功
      this.drawer = false
      this.getList()
    },
    handleEdit (item) {
      // 修改
      editDenseFrameList(item).then(res => {
        this.$message.success('修改成功！')
      })
    },
    handleToHose (item) {
      this.$router.push({
        path: '/warehouseArchives/shelfInside',
        query: {
          id: item.id
        }
      })
    },
    handleDrawer (type) {
      const arr = [{
        title: '新增密集架',
        size: '50%',
        direction: 'ltr',
        type: 'add'
      }, {
        title: '编辑',
        size: '50%',
        direction: 'ltr',
        type: 'edit'
      }]
      if (type === '编辑') {
        if (!this.rowData.id) {
          this.$message.warning('请选择一条信息进行编辑！')
          return
        }
      }

      arr.map(item => {
        if (item.title === type) {
          this.setDrawer = item
          this.type = item.type
        }
      })
      this.drawer = true
    },
    handleDel () {
      if (!this.rowData.id) {
        this.$message.warning('请选择一条信息进行删除！')
        return
      }
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this.rowData.id)
        detDenseFrameList([this.rowData.id]).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.getList()
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "../../../../../styles/mixin";

  .within {
    .house {
      @include fj(flex-start);
      flex-wrap: wrap;
      margin-top: 20px;
      max-height: calc(100vh - 150px);
      overflow-y: auto;

      li {
        text-align: center;
        margin: 10px;
        @include wh(150px, 345px);
        padding: 10px;
        cursor: pointer;
        border-radius: 4px;

        &.active, &:hover {
          box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
        }
        &.active{
          background: #fff;
        }

      }
    }
  }
</style>
